<template>
  <HomePanel ref="target" title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    <template #right><XtxMore style="line-height: 22px" /></template>
    <!-- 面板内容 -->
    <div class="home-new">
      <Transition name="fade">
        <ul class="goods-list" v-if="list.length">
          <li v-for="item in list" :key="item.id">
            <RouterLink :to="`/product/${item.id}`">
              <img :src="item.picture" alt="" />
              <p class="name ellipsis">{{ item.name }}</p>
              <p class="price">&yen;{{ item.price }}</p>
            </RouterLink>
          </li>
        </ul>
        <!-- 进行判断的就是当列表数据已经加载完了就显示有图片的，没有加载完就显示骨架组件，为了美观还需要给骨架组件添加样式 -->
        <HomeSkeleton v-else name="fade"></HomeSkeleton>
      </Transition>
    </div>
  </HomePanel>
</template>
<script>
import { useLazyData } from '@/utils/hooks.js'
// 导入监听懒加载的方法
// import { useIntersectionObserver } from '@vueuse/core'
import HomeSkeleton from './home-skeleton.vue'
import HomePanel from './home-panel'
// import { ref } from 'vue'
import { getNewGoods } from '@/api/home.js'
export default {
  name: 'HomeNew',
  components: { HomePanel, HomeSkeleton },
  // 1.定义api函数
  // 2.定义响应式数据[]
  // 3.在组件初始化后去获取数据，并给空数组
  // 4.返回数据进行渲染
  setup() {
    // const list = ref([])
    // onMounted(async () => {})
    // 监听元素或组件进入和离开可视区的函数
    // 监听target
    // const target = ref(null)
    // const { stop } = useIntersectionObserver(
    // 第一个参数，被监听得元素或组件
    // target,
    // async ([{ isIntersecting }]) => {
    // 是否进入可视区
    // 如果在这里发请求，需要判断isIntersecting值为true,但是每次进入和出可视区isIntersecting的值都会随这个状态发生变化，这样的话请求的次数太多了，只要第一次进入的时候发请求即可。如果第一次进入发请求就要停止观察
    // 判断是否进入可视区
    // if (isIntersecting) {
    // stop()
    // const data = await getNewGoods()
    // list.value = data.result
    // console.log(isIntersecting)
    // }
    // }
    // )
    // 方法二：导入封装好的函数
    const { target, list } = useLazyData(getNewGoods)
    return { target, list }
  }
}
</script>
<style scoped lang="less">
.home-new {
  position: relative;
  height: 426px;
}
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    transition: all 0.5s;
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding: 12px 30px 0 30px;
      text-align: center;
    }
    .price {
      color: var(--price-color);
    }
  }
}
</style>
